<template>
  <div>
    <el-button @click="gene">EchartsTest</el-button>
    <el-button @click="gene4Ex">操作第5图</el-button>

    <div
      ref="sample"
      style="width: 300px; height: 400px; background-color: #b6aa9a"
    ></div>
    <div class="all-content">
      <template v-for="(e, i) in 9">
        <div :key="i" ref="ec" class="sub-content"></div>
      </template>
    </div>
    <!--     ec[0]  ec[1] ec[2]-->
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "EchartsTest",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      names: ["zhangsan", "lisi", "wangwu"],
      scores: [89, 77, 88],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {
    this.gene0();
    this.gene1();
    this.gene2();
    this.gene3();
    this.gene4();
    this.gene5();
    this.gene6();
  },
  methods: {
    sampleM() {},
    geneX(a = 10) {
      let r = [];
      for (let i = 0 - a; i <= a; i++) {
        r.push(i);
      }
      return r;
    },
    geneY(func, a = 10) {
      let r = [];
      for (let i = 0 - a; i <= a; i++) {
        r.push(func(i));
      }
      return r;
    },

    gene0() {
      let eobj = this.$echarts.init(this.$refs.ec[0]);
      let option = {
        // series: {
        //   type: "line",
        //   data: this.geneY((x) => {
        //     return 2 * x + 1;
        //   }),
        // },
        series: [
          {
            type: "line",
            data: this.geneY((x) => {
              return 2 * x + 1;
            }),
          },
          {
            type: "line",
            data: this.geneY((x) => {
              return Math.pow(x, 2) - 2;
            }),
          },
        ],
        xAxis: {
          type: "category",
          data: this.geneX(),
        },
        yAxis: {
          type: "value",
        },
      };
      eobj.setOption(option);
    },
    gene1() {
      let eobj = this.$echarts.init(this.$refs.ec[1]);
      let option = {
        series: [
          {
            type: "scatter",
            data: this.geneY((x) => Math.exp(x), 10),
            symbol: "rect",
          },
        ],
        xAxis: {
          type: "category",
          data: this.geneX(10),
        },
        yAxis: {
          type: "value",
        },
      };
      eobj.setOption(option);
    },
    gene2() {
      let eobj = this.$echarts.init(this.$refs.ec[2]);
      let option = {
        series: [
          {
            stack: "a",
            type: "bar",
            data: this.geneY((x) => 2 * x + 1),
          },
          {
            stack: "a",
            type: "bar",
            data: this.geneY((x) => 1 + 3 * x),
          },
          {
            stack: "b",
            type: "bar",
            data: this.geneY((x) => 2 + x),
          },
        ],
        xAxis: {
          type: "category",
          data: this.geneX(),
        },
        yAxis: {
          type: "value",
        },
      };
      eobj.setOption(option);
    },
    gene3() {
      let obj = this.$echarts.init(this.$refs.ec[3]);
      let option = {
        legend: {
          data: ["class1", "class2", "class3"],
        },
        series: [
          {
            type: "pie",
            data: [
              { name: "class1", value: 20 },
              { name: "class2", value: 70 },
              { name: "class3", value: 40 },
            ],
            // radius: "50%",
            radius: ["40%", "80%"],
          },
        ],
      };
      obj.setOption(option);
    },
    gene4() {
      let eobj = this.$echarts.init(this.$refs.ec[4]);
      let option = {
        series: [
          {
            name: "001",
            type: "line",
            data: this.geneY((x) => {
              return 2 * x + 1;
            }),
          },
          {
            name: "002",
            type: "line",
            data: this.geneY((x) => {
              return 4 - 2 * x;
            }),
          },
        ],
        xAxis: {
          type: "category",
          data: this.geneX(10),
        },
        yAxis: {
          type: "value",
        },
      };
      eobj.setOption(option);
    },
    gene4Ex() {
      let obj4 = this.$echarts.getInstanceByDom(this.$refs.ec[4]);
      obj4.setOption({
        series: [
          {
            name: "002",
            type: "line",
            data: this.geneY((x) => {
              return Math.pow(x, 2) + 5;
            }),
          },
        ],
      });
    },
    gene5() {
      let obj = this.$echarts.init(this.$refs.ec[5]);
      let option = {
        series: [{ type: "line" }, { type: "line" }, { type: "line" }],
        xAxis: {
          type: "category",
        },
        yAxis: {
          type: "value",
        },
        dataset: {
          source: [
            ["product", "shanghai", "chongqing", "chengdu"],
            ["tomato", 12, 12, 11],
            ["banana", 11, 12, 13],
            ["apple", 5, 6, 5.4],
            ["pear", 1, 2, 1.2],
          ],
        },
      };
      obj.setOption(option);
    },
    gene6() {
      let obj = this.$echarts.init(this.$refs.ec[6]);
      let option = {
        series: [{ type: "line" }, { type: "line" }, { type: "line" }],
        xAxis: {
          type: "category",
        },
        yAxis: {
          type: "value",
        },
        dataset: {
          dimension: ["product", "shanghai", "chongqing", "chengdu"],
          source: [
            { product: "tomato", shanghai: 12, chongqing: 12, chengdu: 11 },
            { product: "banana", shanghai: 11, chongqing: 12, chengdu: 13 },
            { product: "apple", shanghai: 5, chongqing: 6, chengdu: 5.4 },
            { product: "pear", shanghai: 1, chongqing: 2, chengdu: 1.2 },

            //   [
            //   ("tomato", 12, 12, 11)
            // ],
            // ["banana", 11, 12, 13],
            // ["apple", 5, 6, 5.4],
            // ["pear", 1, 2, 1.2],
          ],
        },
      };
      obj.setOption(option);
    },
    gene() {
      //  第一步 确定渲染区域 html代码
      //  第二步 js代码
      let echartObj = this.$echarts.init(this.$refs.sample);

      let option = {
        title: {
          text: "Hello Echart",
        },
        series: {
          //声明柱状图
          type: "bar",
          //  声明核心数据。
          data: this.scores,
        },
        xAxis: {
          type: "category",
          data: this.names,
        },
        yAxis: {
          type: "value",
        },
      };

      echartObj.setOption(option);
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.all-content {
  background-color: #d5f3e4;
  display: flex;
  flex-wrap: wrap;
  width: 1300px;
  height: 1300px;
}
.sub-content {
  background-color: beige;
  margin: 2px;
  width: 400px;
  height: 400px;
}
</style>
